.inviteFriendPage {
    background: #F1F5F9;

    .topContent {
        padding: 10rem 16rem 16rem 16rem;
        box-sizing: border-box;
        background-color: white;

        .inviteType {
            color: #FF2D55;
            font-family: Inter;
            font-size: 16rem;
            font-style: normal;
            font-weight: 500;
            line-height: 16rem;
        }

        .qrCode {
            color: #343C4B;
            font-family: Inter;
            font-size: 12rem;
            font-style: normal;
            font-weight: 500;
            line-height: 16rem;
            margin-top: 10rem;
            &+.qrCode {
                margin-top: 4rem;
            }
        }
    }

    .bottomContent {
        // padding: 16rem;
        box-sizing: border-box;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .qrCodeBg {
            height: 237rem;
            width: 100%;
            background: url("@/assets/images/Recommend/qrCodeBg.png") no-repeat;
            background-size: cover;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;

            :nth-child(1) {
                color: #343C4B;
                font-family: Inter;
                font-size: 16rem;
                font-style: normal;
                font-weight: 500;
                line-height: 16rem;
            }

            :nth-child(2) {
                width: 142rem;
                height: 141.007rem;
                margin-top: 10rem;
            }
        }

        .dividingLine {
            width: 317.671rem;
            height: 1rem;
            margin-bottom: -10rem;
            margin-top: -11rem;
        }

        .inviteCode {
            background: url("@/assets/images/Recommend/inviteCodeBg.png") no-repeat;
            background-size: cover;
            width: 100%;
            padding: 24rem 40rem;
            box-sizing: border-box;

            .code {
                margin-top: 16rem;
            }

            .link {
                display: flex;
                align-items: center;
                justify-content: space-between;

                .title {
                    color: #343C4B;
                    font-size: 16rem;
                    font-style: normal;
                    font-weight: 500;
                    display: flex;
                    align-items: center;
                    div {
                        padding: 2rem;
                        font-size: 16rem;
                        font-style: normal;
                        font-weight: 500;
                        color: #FF2D55;
                        white-space: nowrap; /* 防止文字换行 */
                        overflow: hidden; /* 文字溢出隐藏 */
                        text-overflow: ellipsis;
                        width: 180rem;
                    }
                }
            }
        }

        .haveInvited {
            border-radius: 12rem;
            border: 1rem solid #FFF;
            width: 95%;
            height: 44rem;
            margin: 16rem auto;
            background: linear-gradient(268deg, #FFF 0.39%, #FFF 71.26%, #FFF0EF 96.89%);

            box-shadow: 0rem 2rem 12rem 0rem rgba(104, 125, 147, 0.12);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14rem 24rem;
            box-sizing: border-box;

            :nth-child(1) {
                color: #343C4B;

                font-family: Inter;
                font-size: 14rem;
                font-style: normal;
                font-weight: 500;
            }

            :nth-child(2) {
                color: #FF2D55;

                text-align: center;
                font-family: Inter;
                font-size: 16rem;
                font-style: normal;
                font-weight: 600;

                span {
                    color: #000;
                    font-family: Inter;
                    font-size: 14rem;
                    font-style: normal;
                    font-weight: 500;
                }
            }
        }
    }
}